*{
  margin: 0;
  padding: 0;
  border:0;
}
a{
  text-decoration: none;
  color: #000;
}
.header{
  background: linear-gradient(to top,rgb(155, 129, 247),#3838f3);
  height: 250px;
}
nav{
  width: 80%;
  margin: 0 auto
}
.header li{
  display: inline-block;
  margin: 15px;
}
a:hover{
  color: rgb(238, 219, 158);
  text-decoration: underline;
}
.dl{
  float: right;
}
.sc{
  margin-top: 50px;
  width: 600px;
  height: 300px;
  margin: -50px auto;
  border-radius: 15px;
  background: rgb(155, 108, 47);
  line-height: 300px
}
.sc ul{
  text-align: center;
}
.sc li{
  display: inline-block;
  width: 120px;
  margin: 0 auto;
  margin-right: 50px;
  background: rgb(236, 223, 98);
  height: 120px;
  border-radius: 50%;
  line-height: 120px
}
li:last-child{
  margin-right: 0;
}
.container{
  margin-top: 100px;
  width: 100%;
  background: pink;
}
.item{
  margin: 0 auto;
  width: 80%;
}
.container img{
  width: 350px;
}
.diration{
  display: inline-block;
  position: absolute;
  margin: 15px;
  width: 380px;
}
.diration h1{
  color: #d36b2f;
}
.diration li{
  line-height: 45px;
  list-style-type: none;
}
footer{
  text-align: center;
}
.login{
  display:none;
}
.login.active{
  position: fixed;
  background: rgba(0,0,0,.3);
  left: 0;
  top: 0;
  width:100%;
  height:100%;
  display: block;
}
.mask{
  position:absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  border: 1px solid #76866fe0;
  padding: 15px 30px;
  background: #000;
  opacity: .7;
}
.mask.active{
  animation: mm 1s;
  animation-iteration-count: 1;
}
@keyframes mm{
  0% {
    transform: translate(-100%,-100%) rotate(1deg)
  }
  5%{
    transform: translate(-97.5%,-97.5%) rotate(90deg)
  }
  10%{
    transform: translate(-95%,-95%) rotate(180)
  }
  15% {
    transform: translate(-92.5%,-92.5%) rotate(360deg)
  }
  20%{
    transform: translate(-90%,-90%) rotate(1deg)
  }
  25%{
    transform: translate(-87.5%,-87.5%) rotate(90deg)
  }
  30% {
    transform: translate(-85%,-85%) rotate(180deg)
  }
  35%{
    transform: translate(-82.5%,-82.5%) rotate(360deg)
  }
  40%{
    transform: translate(-80%,-80%) rotate(1deg)
  }
  45% {
    transform: translate(-77.5%,-77.5%) rotate(90deg)
  }
  50%{
    transform: translate(-75%,-75%) rotate(180deg)
  }
  55%{
    transform: translate(-72.5%,-72.5%) rotate(360deg)
  }
  60% {
    transform: translate(-70%,-70%) rotate(1deg)
  }
  65%{
    transform: translate(-67.5%,-67.5%) rotate(90deg)
  }
  70%{
    transform: translate(-65%,-65%) rotate(180deg)
  }
  75% {
    transform: translate(-62.5%,-62.5%) rotate(360deg)
  }
  80%{
    transform: translate(-60%,-60%) rotate(1deg)
  }
  85%{
    transform: translate(-57.5%,-57.5%) rotate(90deg)
  }
  90% {
    transform: translate(-55%,-55%) rotate(180deg)
  }
  95%{
    transform: translate(-52.5%,-52.5%) rotate(360deg)
  }
  100%{
    transform: translate(-50%,-50%) rotate(0deg)
  }
}
label{
  display: block;
  padding: 10px 0;
  color:#fff;
}
.login input{
  line-height: 30px;
  margin: 6px auto;
  width:300px;
}
.login button{
  width:100%;
  height: 30px;
  background: deepskyblue;
  margin: 15px auto;
  cursor: pointer;
  display: block;
}

